<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>用户注册</title>
                <!-- 新 Bootstrap 核心 CSS 文件 -->
                <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
                 
                <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
                <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
                 
                <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
                <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
            <!-- 这里放js函数 -->
                <script>
                        function checkUname(){
                                //1.从文本框里提取用户名
                                username =$("#uname").val();
                                console.log(username);
                                //2.定义一个比较规则（正则表达式)，区分大小写
                                regexp = /^[a-zA-Z0-9]{6,20}$/;
                                if(!regexp.test(username)){
                                        // alert("用户名不合法");
                                        //jQuery用法
                                        $("#uname").css("border","1px solid red");
                                } else {
                                        $("#uname").css("border","");
                                }
                        }
                        function checkTel(){
                            mobile = $("#tel").val();
                            regexp = /^[0-9]{11}$/;
                            if (!regexp.test(mobile)) {
                                $("#tel").css("border", "1px solid red");
                            } else {
                                $("#tel").css("border","");
                            }
                        }
                        
                        function checkAll(){
                                checkUname();
                                checkTel();
                        }
                </script>
        </head>
        <body>
                <div class="container">
                        <h2>用户注册</h2>
                        <form>
                                <div class="form-group">
                                        <label>用户名</label>
                                        <input onblur="checkUname()" class="form-control" type="text" id="uname"/>
                                </div>
                                <div class="form-group">
                                        <label>手机号码</label>
                                        <input onblur="checkTel()" class="form-control" type="text" id="tel"/>
                                </div>
                                <button onclick="checkAll()" type="button" class="btn-danger">注册</button>
                        </form>
                </div>
        </body>
</html>